.ui-page {
  position: relative;
  color: var(--ui-TC);
  background-color: var(--ui-BG-1) !important;
  z-index: 2;
  display: flex;

  .page-body {
    flex: 1;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    overflow: hidden;

    .page-body-main {
      position: relative;
      z-index: 1;
    }

    .page-img {
      height: 177vw;
      width: 100vw;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
  }
}

.loading-body {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  .loader {
    position: absolute;
    top: 50%;
    left: 40%;
    margin-left: 10%;
    transform: translate3d(-50%,-50%,0);

    .dot {
      width: 48rpx;
      height: 48rpx;
      background: #3ac;
      border-radius: 100%;
      display: inline-block;
      animation: slide 1s infinite;
      &:nth-child(1) {
        animation-delay: 0.1s;
        background: #32aacc;
      }
      &:nth-child(2) {
        animation-delay: 0.2s;
        background: #64aacc;
      }
      &:nth-child(3) {
        animation-delay: 0.3s;
        background: #96aacc;
      }
      &:nth-child(4) {
        animation-delay: 0.4s;
        background: #c8aacc;
      }
      &:nth-child(5) {
        animation-delay: 0.5s;
        background: #faaacc;
      }
    }
  }
}

@keyframes slide {
  0% {
    transform: scale(1);
  }
  50% {
    opacity: .3;
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}